﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
  <title></title>
  <script src="../../js/jquery.js" type="text/javascript"></script>
  <script src="../../js/maptalks.js" type="text/javascript"></script>
  <script src="../../js/echart.js" type="text/javascript"></script>
  <script src="../../js/echart-gl.js" type="text/javascript"></script>
  <style>
    html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  #main{
    width: 100%;
    height: 100%;
  }
  </style>
</head>

<body>
  <div id="main"></div>
</body>
<script type="text/javascript">
  //origin echart mehudeyi
  //https://gallery.echartsjs.com/editor.html?c=xHk57t88Xz
  var myChart = echarts.init(document.getElementById('main'));
  myChart.showLoading();
  $.getJSON('../../data/wuhan1.json', function (buildingsGeoJSON) {
    var name=0;
    var features=[];
    var regionsData = buildingsGeoJSON.features.map(function (feature) {
      var _name=name++
      feature.properties.name=_name.toString();
      features.push(feature);
      return {
        name: _name.toString(),
        value: Math.random(),
        height: feature.properties.height * 10 + 20
      };
    });
    var geojson={
      features:features
    }
    echarts.registerMap('buildings', geojson);

    myChart.hideLoading();

    // var name = 0;
    // var regionsData = buildingsGeoJSON.features.map(function (feature) {
    //   var _name=name++
    //   return {
    //     name: _name.toString(),//feature.properties.name
    //     value: Math.random(),
    //     height: +feature.properties.height * 10 + 20
    //   };
    // });

    myChart.setOption({
      maptalks3D: {
        center: [114.26325703700002, 30.586419005899984],
        zoom: 13,
        pitch: 50,
        bearing: -10,
        // style: 'mapbox://styles/mapbox/dark-v9',
        baseLayer: {
          'urlTemplate': 'http://a.tiles.mapbox.com/v3/spatialdev.map-c9z2cyef/{z}/{x}/{y}.png',
          // 'subdomains'  : ['a','b','c','d']
        },
        postEffect: {
          enable: true,
          SSAO: {
            enable: true,
            intensity: 1.3,
            radius: 5
          },
          screenSpaceReflection: {
            enable: false
          },
          depthOfField: {
            enable: true,
            blurRadius: 4,
            focalDistance: 90
          }
        },
        light: {
          main: {
            intensity: 2,
            alpha: -40,
            shadow: true,
            shadowQuality: 'high'
          },
          ambient: {
            intensity: 0.
          },
          ambientCubemap: {
            texture: '../../data/data-1491838644249-ry33I7YTe.hdr',
            exposure: 1,
            diffuseIntensity: 0.5,
            specularIntensity: 1
          }
        }
      },
      series: [{
        type: 'map3D',
        coordinateSystem: 'maptalks3D',
        map: 'buildings',
        data: regionsData,
        shading: 'realistic',
        instancing: true,
        silent: true,
        itemStyle: {
          areaColor: '#fff'
        },
        realisticMaterial: {
          metalness: 0,
          roughness: 0.0
        }
      }]
    });
  });
  window.addEventListener('resize', function () {
    myChart.resize();
  });
</script>

</html>